//把不同的工作放到不同的方法中 
//this指向
class ChinaMap {
    constructor(){
        console.log('实例化了');
        //统一方案
        this.cube = null;  //属性 可在外面找到
        this.init();   //执行流程的管理方法
    }
    init(){
        //三个对象的实例放在这里
        this.scene = new THREE.Scene();
        this.setCamery();
        this.setRenderer();
        const geometry = new THREE.BoxGeometry();     //形状
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })//材质  
        this.cube = new THREE.Mesh(geometry, material);   //立方体
        this.scene.add(this.cube);   //把cube添加至scene中
        this.render();
        this.animate();        //动画，让立方体自动动起来
        var controller = new THREE.OrbitControls(this.camera,
            this.renderer.domElement);    //控制器
    }
    setCamery(){
        this.camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
          )
          this.camera.position.z = 5;
          this.camera.position.x = 0;
    }
    setRenderer(){
        this.renderer = new THREE.WebGLRenderer()// 设置画布的大小
        this.renderer.setSize(window.innerWidth, window.innerHeight)
      //这里 其实就是canvas 画布  renderer.domElement
        document.body.appendChild(this.renderer.domElement)
    }   
    render(){
        this.renderer.render(this.scene, this.camera)
    }
    animate(){
        requestAnimationFrame(this.animate.bind(this))
        this.cube.rotation.x += 0.01
        this.cube.rotation.y += 0.01
        this.render()
    }
}
